<template>
  <div>
    <div class="button-bar">
      <el-button @click="$refs.globalSetting.show()" type="success">全局设置</el-button>
      <el-button @click="$refs.bulkCreate.show()" type="primary">添加服务器</el-button>
      <el-button @click="getClients" type="primary">刷新列表</el-button>
      <el-button @click="update">更新爬虫的代码</el-button>
      <el-button @click="execute">重启爬虫的程序</el-button>

      <el-button type="text" size="small" @click="reset">重新初始化</el-button>
      <el-button type="text" size="small" @click="remove">删除</el-button>
      <el-button type="text" size="small" @click="disconnect">停止爬虫</el-button>
    </div>

    <div class="button-bar">
      <div>最近 <span class="orange">{{status.executedTimes}}</span> 次周期完成的平均时间：<span class="orange">{{status.averageTime}}</span>
        分钟。
      </div>
      <div>最后给爬虫发出命令的时间：<span class="orange">{{status.lastTime}}</span></div>
    </div>

    <div class="button-bar">
      自动刷新
      <el-checkbox v-model="autoRefresh"/>
      <!--todo 测试代码-->
      <el-button @click="testSpider">发送测试命令</el-button>
    </div>

    <el-table :data="clients" border stripe @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column prop="ip" label="IP"/>
      <el-table-column prop="status" label="状态"/>
      <el-table-column label="队列" width="80px">
        <template slot-scope="scope">
          <div>爬虫</div>
          <div>保存</div>
        </template>
      </el-table-column>
      <el-table-column label="完成" width="80px">
        <template slot-scope="scope">
          <div>{{scope.row.status_num. spider.finish}}</div>
          <div>{{scope.row.status_num.save.finish}}</div>
        </template>
      </el-table-column>
      <el-table-column label="等待" width="80px">
        <template slot-scope="scope">
          <div>{{scope.row.status_num.spider.wait}}</div>
          <div>{{scope.row.status_num.save.wait}}</div>
        </template>
      </el-table-column>
      <el-table-column label="错误" width="80px">
        <template slot-scope="scope">
          <div class="orange">{{scope.row.status_num.spider.error}}</div>
          <div class="orange">{{scope.row.status_num.save.error}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showEditor(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <vps-editor ref="editor" @success="getClients"/>
    <vps-bulk-create ref="bulkCreate" @success="getClients"/>
    <global-setting ref="globalSetting"/>
  </div>
</template>

<script>
  import VpsEditor from './vpsEditor';
  import VpsBulkCreate from './vpsBulkCreate';
  import GlobalSetting from './globalSetting';

  let updateTimeout, clientsObject = {};
  export default {
    name: 'vpsList',
    components: {VpsEditor, VpsBulkCreate, GlobalSetting},
    data() {
      return {
        autoRefresh: false,
        status: {
          lastTime: 0,
          '队列情况': {
            '爬虫': 0,
            '保存': 0,
          },
          '执行时间': [],
          '更新时间': '',
        },
        clients: [],
        selectedClients: [],
      };
    },
    methods: {
      async getClients() {
        const res = await this.$http.get('/api/vps');
        const {clients, status} = res.data;

        this.status = status;
        this.clients = clients.map(vps => {
          if (!vps.status_num)
            vps.status_num = {
              spider: {finish: 0, wait: 0, error: 0},
              save: {finish: 0, wait: 0, error: 0},
            };
          return vps;
        });

        clearTimeout(updateTimeout);
        if (this.autoRefresh) {
          setTimeout(() => {
            this.getClients();
          }, 5000);
        }
      },
      showEditor(client) {
        this.$refs.editor.show(client);
      },
      handleSelectionChange(val) {
        this.selectedClients = val;
      },
      reset() {
        this.$confirm('确认重设？').then(() => {
          this.action('reset');
        });
      },
      remove() {
        this.$confirm('确认删除？').then(() => {
          this.action('remove');
        });
      },
      disconnect() {
        this.$confirm('确认断开？').then(() => {
          this.action('disconnect');
        });
      },
      update() {
        this.action('update');
      },
      execute() {
        this.action('execute');
      },
      async action(action) {
        if (this.selectedClients.length === 0)
          return this.$message({message: '请选择服务器', type: 'error'});
        const res = await this.$http.post('/api/vps/' + action,
            {id: this.selectedClients.map(client => client.id)});
        this.$message({message: '操作成功', type: 'success'});
        this.getClients();
      },
      //todo 测试代码
      testSpider() {
        this.$http.get('/api/vps/test');
      },
    },
    watch: {
      autoRefresh(val) {
        if (val)
          this.getClients();
      },
    },
    mounted() {
      this.getClients();
    },
  };
</script>

<style>
  .orange {
    color: orange;
  }
</style>